<template>
	<view class="container">
		<view class="formcontent">
			<view class="logintitle">登录 | 注册</view>
			<view class="login_dl">
				<view class="login_dt">
					手机号码
					<text v-if="jishu>0">重新获取（{{jishu}}s）</text>
					<!--倒计时结束后显示重新获取按钮-->
					<text class="getcode" v-if="jishu==0" @tap="sendcode">重新获取?</text>
					<!--倒计时结束后显示重新获取按钮end-->
				</view>
				<view class="login_dd">
					<view class="vcode-input-body">
						<text class="vcode-input-item" :class="isBorderLine?'vinput-line':'vinput-border'"
							v-for="(v,index) in sum" :key="index" @tap.stop="setFocus" :style="{
							borderColor:text.length===index&&focus?borderActiveColor:(text.length>index?borderValueColor:borderColor)
						}">{{text[index]}}</text>
						<view class="hidden-input">
							<input type="number" :show-confirm-bar="false" auto-blur :cursor="99" :focus="focus"
								:maxlength="sum" v-model="value" @blur="setBlur" @focus="setFocus"
								:password="isPassword" placeholder="验证码" />
						</view>
					</view>
				</view>
			</view>
			<view class="login_button">
				<button class="loginbtn" @tap="login">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * vcode-input 验证码输入框
	 * @description 验证码输入框。
	 * @property {Boolean}			autofocus			自动获取焦点
	 * @property {Number}			sum					验证码长度
	 * @property {Boolean}			isBorderLine		显示的输入框的样式
	 * @property {String}			borderColor			输入框未输入边框颜色
	 * @property {String}			borderValueColor	输入框已输入边框颜色
	 * @property {String}			borderActiveColor	输入框选中边框颜色
	 * @property {Boolean}			isAutoComplete		当输入长度达到sum规定时才回调
	 * @property {Boolean}			isPassword			是否为密文输入
	 * @example <vcode-input ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input>
	 */
	import API from "@/common/api.js"
	export default {
		name: 'vcode-input',
		props: {
			autofocus: {
				type: Boolean,
				default: true
			},
			sum: {
				type: Number,
				default: 4
			},
			isBorderLine: {
				type: Boolean,
				default: false
			},
			borderColor: {
				type: String,
				default: '#f3f4f8'
			},
			borderValueColor: {
				type: String,
				default: '#dddddd'
			},
			borderActiveColor: {
				type: String,
				default: '#357dff'
			},
			isAutoComplete: {
				type: Boolean,
				default: true
			},
			isPassword: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				issend: false,
				mobile: '',
				jishu: 59,
				focus: false,
				text: [],
				value: '',
			};
		},
		watch: {
			value(value, oldVal) {
				if (this.isAutoComplete) {
					if (value.length >= this.sum) {
						this.setBlur();
						this.$emit('vcodeInput', value);
					}
				} else {
					this.$emit('vcodeInput', value);
				}
				if (this.isPassword) {
					let val = '';
					for (let i = 0; i < value.length; i++) {
						val += '●';
					}
					this.text = val;
				} else {
					if (value) {
						this.text = value.split("");
					} else {
						this.text = [];
					}
				}
			}
		},
		onLoad(e) {
			this.mobile = e.mobile;
			this.func_jishu();
		},
		mounted() {
			this.$nextTick(() => {
				this.initInput()
			})
		},
		methods: {
			login() {
				if (this.value.length != 4) {
					API.showToast("请输入验证码");
				} else {
					var parentid = uni.getStorageSync("parentid")
					API.post("user/mobileLogin", {
						mobile: this.mobile,
						code: this.value,
						parentid: parentid
					}).then(res => {
						if (res.code == 1) {
							//uni.removeStorageSync('username');
							//uni.setStorageSync('username',this.mobile);
							//uni.setStorageSync('yygh_user_id',res.data);
							API.showModal(res.msg, "/pages/user/user")

						} else {
							API.showToast(res.msg)
						}
					})
				}
			},
			func_jishu() {
				var $this = this
				var timer = setInterval(function() {
					$this.jishu--;
					if ($this.jishu == 0) {
						clearInterval(timer);
					}
				}, 1000);
			},
			sendcode() {
				if (!this.issend) {
					this.issend = true;
					API.sendCode(this.mobile).then(res => {
						this.issend = false;
						if (res.code == 1) {
							this.jishu = 59;
							this.func_jishu();
						} else {
							API.showModal(res.msg);
						}
					}).catch(res => {

					});

				}
			},
			initInput() {
				if (this.autofocus)
					this.focus = true;
			},
			setBlur() {
				uni.hideKeyboard();
				this.$nextTick(() => {
					this.focus = false;
				})
			},
			setFocus() {
				this.focus = true;
			},
			clearValue() {
				this.setBlur();
				this.value = '';
				this.text = [];
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/login.css';

	.vcode-input-body {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10rpx;
	}

	.vcode-input-item {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 20rpx;
		background: #f3f4f8;
		color: #222;
		font-size: 44rpx;
	}

	.vinput-border {
		border-style: solid;
		border-width: 2rpx;
		border-color: #f3f4f8;
	}

	.vinput-line {
		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		border-color: #f3f4f8;
	}

	.hidden-input {
		width: 1px;
		height: 1px;
		position: absolute;
		left: -1px;
		top: -1px;
		overflow: hidden;
	}
</style>